<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <button id="add">添加订阅</button>
  <button id="issue">发布订阅</button>
  <button id="cancel">取消订阅</button>

  <br />
  <br />
  <br />

  <button id="add1">创建频道</button>
  <button id="del1">关闭频道</button>
  <button id="add2">加入频道</button>
  <button id="add3">广播</button>
</body>
<script src="./eventBus.js"></script>
<script lang="">
  // 事件总线实例
  const eventBus = new EventBus()

  // -------------------------------------------------------------- 广播 start
  // 创建一个频道
  document.getElementById('add1').onclick = () => {
    eventBus.createChannel('pd1')
  }
  
  // 关闭频道
  document.getElementById('del1').onclick = () => {
    eventBus.channeOff('pd1')
  }

  // 加入频道
  document.getElementById('add2').onclick = () => {
    eventBus.channelOn('pd1', 'sj1', (val) => {
      console.log('pd1广播内容:', val)
    })
    eventBus.channelOn('pd1', 'sj2', (val) => {
      console.log('pd1广播内容:', val)
    })
    eventBus.channelOn('pd1', 'sj3', (val) => {
      console.log('pd1广播内容:', val)
    })
  }

  // 频道广播
  document.getElementById('add3').onclick = () => {
    eventBus.channelEmit('pd1', '广告内容有这些文字')
  }
  // -------------------------------------------------------------- 广播 end



  
  // -------------------------------------------------------------- 订阅 start
  document.getElementById('add').onclick = () => {
    // 添加订阅
    eventBus.on('add', (val) => {
      console.log(`第一个订阅接受的数据:`, val)
    })

    // 添加订阅
    eventBus.on('add', (val) => {
      console.log(`第二个订阅接受的数据:`, val)
    })
  }

  document.getElementById('issue').onclick = () => {
    // 发布订阅
    eventBus.emit('add', '1122323123')
  }

  document.getElementById('cancel').onclick = () => {
    // 取消订阅
    eventBus.off('add')
  }
  // -------------------------------------------------------------- 订阅 end


</script>
</html>